<!--
 * @Description: 
 * @Autor: Zhu_liangyu
 * @Date: 2020-05-23 18:03:00
--> 
<template>
  <div>
    <div class="baisc-form-custom-header">
      <a-page-header @back="() => $router.push({'path':generatorListUrl})" title="生成详情">
        <template slot="extra">
          <a-button key="3" type="primary" @click="visible=true">模块设置</a-button>
          <a-button key="4" type="primary" @click="createFile">生成文件</a-button>
        </template>
      </a-page-header>
    </div>
    <a-card :bordered="false">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="列表配置">
          <table-column ref="tableColumn" :table-name="tableName"></table-column>
        </a-tab-pane>
        <a-tab-pane key="2" tab="详情配置" force-render>
          <detail ref="createForm" :table-name="tableName" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-modal
      title="模块列表"
      width="80%"
      :visible="visible"
      @cancel="()=>{visible=false;}"
      :footer="null"
    >
      <module-list v-if="visible"></module-list>
    </a-modal>
  </div>
</template>
<script>
import { generatorListUrl } from "@/api/generator/table";
import TableColumn from "@/views/cms/generator/component/tableColumn";
import Detail from "@/views/cms/generator/component/detail";
import ModuleList from "@/views/org/module/list";
import { createFile } from "@/api/generator/table";
export default {
  components: { TableColumn, Detail, ModuleList },
  data() {
    return {
      generatorListUrl,
      tableName: this.$route.query.tableName,
      visible: false
    };
  },
  methods: {
    createFile() {
      this.$refs.createForm.$refs.detailForm.validate(valid => {
        if (!valid) return false;
        let columns = this.$refs.tableColumn.getColums();
        let createForm = this.$refs.createForm.detailForm;
        var json = {
          createForm: JSON.stringify(createForm),
          columns: JSON.stringify(columns)
        };
        createFile(json).then(response => {
          console.log(response);
        });
      });
    }
  }
};
</script>
